<template>
  <el-drawer
    :visible.sync="orderVisible"
    :before-close="handleClose"
    :size="showMobilePage ? '100%' : '80%'"
    :title="dialogTitle">
    <div class="flyUser-list drawer-content">
      <div class="filter">
        <FilterInput
          ref="FilterToolRef"
          v-model="paramsObj"
          :drawer-size="800"
          :filter-list="filterList"
          :extra-filter-list="extraFilterList"
          :line-feed="showMobilePage"
          show-search-btn
          class="account-filter"
          @selectChange="selectChange"
          @handelClick="queryClick"
          @queryEmpty="queryEmpty"
          @loadMoreFilter="loadMoreFilter"
          @filterTagStatus="filterTagStatus">
          <div v-if="showMobilePage" slot="checkGroup">
            <el-checkbox v-if="showPriceStatus" v-model="notInquiry" @change="queryClick">本月未询价</el-checkbox>
            <el-checkbox v-if="showNoticeStatus" v-model="isOnlyNotice" @change="queryClick">
              <div class="flex-center">仅可通知<InfoIcon content="勾选后仅展示供应商已关联飞来用户的账号" style="margin-left: 4px" /></div>
            </el-checkbox>
          </div>
        </FilterInput>
        <ModeSwitch :mode="signStatus" :mode-list="modeList" :default-un-active-mode="0" />
        <div v-if="!showMobilePage" class="filter-checkbox-container">
          <el-checkbox v-if="showPriceStatus" v-model="notInquiry" @change="queryClick">本月未询价</el-checkbox>
          <el-checkbox v-if="showNoticeStatus" v-model="isOnlyNotice" @change="queryClick">
            <div class="flex-center">仅可通知<InfoIcon content="勾选后仅展示供应商已关联飞来用户的账号" style="margin-left: 4px" /></div>
          </el-checkbox>
          <el-checkbox v-model="isValid" @change="queryClick">有效</el-checkbox>
        </div>
      </div>
      <el-tabs v-model="curTabName" style="margin: 2px 0 8px" @tab-click="onSubActiveOrderChange">
        <el-tab-pane label="账号列表" name="all"/>
        <el-tab-pane name="selected">
          <span slot="label">已选择<el-badge v-if="selectedData.length" :value="selectedData.length" class="select-badge"/></span>
        </el-tab-pane>
      </el-tabs>
      <div class="table-list">
        <div v-loading="listLoading" style="min-height: 100px;">
          <el-table
            v-if="tableShow"
            ref="orderDialog"
            :data="curTabName === 'all'?list.items:selectedTableData"
            :height="setTableHeight"
            :row-class-name="(data) => setRowClass(data)"
            class="fb-table"
            element-loading-text="加载中..."
            empty-text="暂无数据"
            header-cell-class-name="order-data-header-cell"
            fit
            hightlight-current-row
            @sort-change="sortMethod"
            @select="selectTable"
            @select-all="selectTable">
            <el-table-column
              :fixed="useFixed"
              :selectable="selectable"
              align="center"
              type="selection"
              width="50"
            />
            <el-table-column v-if="showPriceStatus" align="left" label="本月是否询价" min-width="110">
              <template slot-scope="scope">
                <el-tooltip :open-delay="800" placement="top">
                  <div slot="content">{{ scope.row.isInquiry | inquiryStatus }}</div>
                  <div style="display:flex; align-items:center">
                    <div :style="{ background: scope.row.isInquiry ? '#31CC9C' : '#406EFF' }" class="dot"/>
                    <div>{{ scope.row.isInquiry | inquiryStatus }}</div>
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column :fixed="useFixed" align="left" label="账号" min-width="150">
              <template slot-scope="scope">
                <div class="flex-center">
                  <el-tooltip
                    v-if="showNoticeStatus && !scope.row.hasRelatedSupplier"
                    content="该账号所关联的供应商未被飞来用户关联，请进行关联"
                    placement="top"
                    style="min-width: 16px">
                    <el-image :src="infoImg" class="info-icon-img" />
                  </el-tooltip>
                  <ToolTip :content="scope.row.accountName" is-can-click @handelClick="toResource(scope.row)" />
                </div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="下单平台" min-width="160">
              <template slot-scope="scope">
                <div class="flex-center ellipsisOne">
                  <platformIcon :data="scope.row.platformName" />
                  {{ scope.row.platformName || '--' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="账号ID">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.accountCode" />
              </template>
            </el-table-column>
            <el-table-column align="left" label="粉丝量" min-width="110">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.fansNum | numberTextFormat(1)" />
              </template>
            </el-table-column>
            <el-table-column align="left" label="订单数" min-width="110">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.orderNum | numberTextFormat(1)" />
              </template>
            </el-table-column>
            <el-table-column align="left" label="运营模式" min-width="110">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.operatingModelName" />
              </template>
            </el-table-column>
            <el-table-column align="left" label="标签" min-width="200">
              <template slot-scope="scope">
                <TagSelect v-model="scope.row.tag" mode="list" />
              </template>
            </el-table-column>
            <el-table-column align="left" label="有效" min-width="110">
              <template slot-scope="scope">
                <div v-if="scope.row.isValid || scope.row.isValid === false">{{ scope.row.isValid?'是':'否' }}</div>
                <div v-else>--</div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="地域" min-width="110">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.region" />
              </template>
            </el-table-column>
            <el-table-column align="left" label="接单偏好">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.orderPreference" />
              </template>
            </el-table-column>
            <el-table-column align="left" label="供应商" min-width="110">
              <template slot-scope="scope">
                <ToolTip v-if="scope.row.channelId" :content="scope.row.supplier" style="cursor:pointer;color:#406EFF;" @click.native="toSupplierDetail(scope.row.channelId)"/>
                <div v-else style="color:#999999">未关联</div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="微信号" min-width="120">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.wxCode" />
              </template>
            </el-table-column>
            <el-table-column align="left" label="手机" min-width="120">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.phone" />
              </template>
            </el-table-column>
            <el-table-column align="left" label="签单签约经纪" min-width="120">
              <template slot-scope="scope">
                <CheckUserInfo v-if="scope.row.agentName" :label="scope.row.agentName" :user-id="scope.row.agentId" />
                <div v-else>--</div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="签约所属部门" min-width="130">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.signDeptName" />
              </template>
            </el-table-column>
            <el-table-column :sortable="curTabName!=='all'?false:'custom'" align="left" label="更新人" prop="updator" min-width="110">
              <template slot-scope="scope">
                <div>
                  <ToolTip :content="scope.row.updator" />
                </div>
              </template>
            </el-table-column>
            <el-table-column :sortable="curTabName!=='all'?false:'custom'" align="left" label="创建时间" min-width="160" prop="createTime">
              <template slot-scope="scope">
                <ToolTip :content="format(scope.row.createTime,'YYYY/MM/DD HH:mm:ss')" />
              </template>
            </el-table-column>
            <el-table-column align="left" label="签约开始时间" min-width="220" prop="signDate">
              <template slot-scope="scope">
                <ToolTip v-if="scope.row.signDateStart && scope.row.signDateEnd" :content="`${format(scope.row.signDateStart,'YYYY/MM/DD')}-${format(scope.row.signDateEnd,'YYYY/MM/DD')}`" />
                <div v-else>--</div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="姓名">
              <template slot="header" slot-scope="scope">
                <div style="height:34px;">{{ scope.column.label }}</div>
              </template>
              <template slot-scope="scope">
                <ToolTip :content="scope.row.userName" />
              </template>
            </el-table-column>
          </el-table>
          <EmptyPlaceholder v-show="!listLoading && !tableShow" style="margin-bottom: 24px" />
        </div>
        <fixed-pagination v-if="curTabName == 'all'" class="bottom-pagination">
          <div class="delete-button-container">
            <el-button :disabled="submitDisable" size="small" type="primary" class="related-btn" @click="handleSubmit">{{ btnText }}<i v-if="addLoading" class="el-icon-loading"/></el-button>
            <el-button size="small" plain type="primary" class="related-btn" @click="handleClose">返回</el-button>
          </div>
          <el-pagination
            v-show="list.items.length > 0"
            :current-page="page"
            :page-size="perPage"
            :total="list.total"
            :page-sizes="[20, 50, 100, 250, 500]"
            :layout="layout"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </fixed-pagination>
        <fixed-pagination v-if="curTabName == 'selected'" class="bottom-pagination">
          <div class="delete-button-container">
            <el-button :disabled="submitDisable" size="small" type="primary" class="related-btn" @click="handleSubmit">{{ btnText }}<i v-if="addLoading" class="el-icon-loading"/></el-button>
            <el-button size="small" plain type="primary" class="related-btn" @click="handleClose">返回</el-button>
          </div>
          <el-pagination
            v-show="selectedData.length > 0"
            :current-page="selectedPage"
            :page-size="selectedPerPage"
            :total="selectedData.length"
            :page-sizes="[20, 50, 100, 250, 500]"
            :layout="layout"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </fixed-pagination>
      </div>
    </div>
  </el-drawer>
</template>
<script>
// api
import { getTagAll } from '@/api/config';
import { validAdviseList, getQuestionReply, queryQuestionHistory } from '@/api/flyNotice';
import { getDepartmentAll } from '@/api/config';
import { format } from '@/filters/date';
import { platformList, orderFormList } from '@/api/select';
import { getOperateoptions } from '@/api/resource';
import { paramsRangeFormat, paramsAryToStr } from '@/utils/paramsFormat';
// mixins
import { numberTextFormat } from '@/filters/number';
import TableAdaptive from '@/mixins/tableAdaptive';
import tableSelections from '@/mixins/tableSelections';
// 组件
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import platformIcon from '@/components/Common/platformIcon';
import TagSelect from '@/components/Common/tagSelect';
import infoImg from '@/assets/supplier/attention.png';
import { allRegionData } from '@/utils/areaConfig';
import { showModal } from '@/utils/message';
import { TAG_MODULES } from '@/utils/const';
import mobileTable from '@/mixins/mobileTable';
import ModeSwitch from '@/components/ListTab/modeSwitch';
import foldTitle from '@/assets/fold-title.png';

export default {
  components: {
    EmptyPlaceholder,
    platformIcon,
    TagSelect,
    ModeSwitch
  },
  filters: {
    inquiryStatus(status) {
      return {
        0: '未询价',
        1: '已询价'
      }[status] || '--';
    },
    numberTextFormat
  },
  mixins: [TableAdaptive, tableSelections, mobileTable],
  props: {
    btnText: {
      type: String,
      default: '确定'
    },
    dialogTitle: {
      type: String,
      default: '选择要询单的账号'
    },
    showSubmitTip: {
      type: Boolean,
      default: true
    },
    modalTip: {
      type: String,
      default: '确定发起询单?'
    },
    queryOrderId: {// 询单id
      type: Number,
      default: -1
    },
    flyQueryId: {// 询价id
      type: Number,
      default: -1
    },
    brandName: {
      type: String,
      default: ''
    },
    productName: {
      type: String,
      default: ''
    },
    isNotice: { // 是否询单弹窗
      type: Boolean,
      default: false
    },
    showPriceStatus: { // 是否显示未询价勾选
      type: Boolean,
      default: false
    },
    showNoticeStatus: { // 是否显示仅可通知勾选
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      foldTitle,
      infoImg,
      TAG_MODULES,
      curTabName: 'all',
      format,
      list: {
        items: [],
        total: 0
      },
      idKey: 'accountId', // 多选框参数
      tableRefName: 'orderDialog',
      page: 1,
      perPage: 20,
      selectedPage: 1,
      selectedPerPage: 20,
      paramsObj: {},
      listLoading: false,
      deptTreeList: [],
      orderPlatformOption: [],
      tagTreeList: [],
      sortName: '',
      sortType: '',
      orderVisible: false,
      rangeKeyArr: [{
        attr: 'createTime',
        start: 'createStartTime',
        end: 'createEndTime',
        type: 'time',
        addTime: true
      }, {
        attr: 'fansNum',
        start: 'fansNumStart',
        end: 'fansNumEnd',
        type: 'fansNums'
      },
      { attr: 'signDate', start: 'signStartDate', end: 'signEndDate', type: 'time', addTime: true },
      { attr: 'orderNum', start: 'orderNumStart', end: 'orderNumEnd', type: 'number' },
      { attr: 'monthReportPrice', start: 'monthReportPriceStart', end: 'monthReportPriceEnd', type: 'number' },
      { attr: 'nextMonthReportPrice', start: 'nextMonthReportPriceStart', end: 'nextMonthReportPriceEnd', type: 'number' },
      { attr: 'monthNotReportPrice', start: 'monthNotReportPriceStart', end: 'monthNotReportPriceEnd', type: 'number' },
      { attr: 'nextMonthNotReportPrice', start: 'nextMonthNotReportPriceStart', end: 'nextMonthNotReportPriceEnd', type: 'number' },
      { attr: 'articlesPrice', start: 'articlesPriceStart', end: 'articlesPriceEnd', type: 'number' }
      ],
      addLoading: false,
      selectedData: [],
      tableOutsideHeight: 208,
      isSignUpOption: [
        { value: 1, label: '是' },
        { value: 0, label: '否' }
      ],
      responsed: [
        { value: 0, label: '待响应' },
        { value: 1, label: '感兴趣' },
        { value: 2, label: '暂不考虑' }
      ],
      questionOption: [],
      answerOption: [],
      orderFormOption: [],
      opEmptyText: '请先选择下单平台',
      answerFilterItem: {
        keyword: 'answerContent',
        name: '反馈记录',
        type: 'loadMoreSelect',
        valueName: 'name',
        directShow: false,
        multiple: true,
        labelName: 'name',
        labelWidth: '100px',
        isImmediatelyQuery: false,
        placeholder: '请选择反馈记录',
        emptyText: '请先选择问题',
        searchkeyword: 'content',
        apiUrl: 'admin/question/replay'
      },
      questionType: null,
      notInquiry: true, // 本月未询价
      isOnlyNotice: false, // 本月未询价
      isValid: true, // 是否有效
      signStatus: 1, // 账号签约状态：0未签约，1签约
      operateModeList: []
    };
  },
  computed: {
    hasSeleted() {
      return this.multipleSelectionAll.length > 0;
    },
    tableShow() {
      return (this.curTabName === 'all' && this.list.items.length > 0) || (this.curTabName === 'selected' && this.selectedData.length > 0);
    },
    selectedTableData() {
      return this.selectedData.slice((this.selectedPage - 1) * this.selectedPerPage, this.selectedPage * this.selectedPerPage);
    },
    arrayKeyArr() {
      return ['tag', 'queryTagName', 'cooperationFormId', 'operateMode', 'answerContent', 'signDeptIds'];
    },
    filterList() {
      const arr = [
        // 输入框
        { keyword: 'accountName', name: '账号', labelWidth: '100px', type: 'input' },
        { keyword: 'userName', name: '姓名', labelWidth: '100px', type: 'input' },
        { keyword: 'fansNum', name: '粉丝量', labelWidth: '100px', type: 'inputRange', onlyInteger: true, isRequired: true, startPlaceholder: '最低粉丝量', endPlaceholder: '最高粉丝量', max: 999999999 },
        { keyword: 'orderPreference', name: '接单偏好', labelWidth: '100px', type: 'input' },
        { keyword: 'supplier', name: '关联供应商', labelWidth: '100px', type: 'input' },
        { keyword: 'wxCode', name: '微信号', labelWidth: '100px', type: 'input' },
        { keyword: 'phone', name: '手机', labelWidth: '100px', type: 'input' },
        { keyword: 'updator', name: '更新人', labelWidth: '100px', type: 'input' },
        { keyword: 'agentName', name: '签单签约经纪', labelWidth: '100px', type: 'input' },
        // 下拉
        { keyword: 'signDeptIds', name: '签约所属部门', type: 'cascaderSelectWithChild', childrenVal: 'children', options: this.deptTreeList },
        { keyword: 'platformId', name: '下单平台', type: 'select', options: this.orderPlatformOption },
        // { keyword: 'tagName', name: '标签', valueName: 'id', labelName: 'name',
        //   childrenVal: 'item', type: 'cascaderSelect', checkStrictly: false, options: this.tagTreeList,
        //   multiple: true, filterable: true, collapseTags: true
        // },
        { keyword: 'tag', name: '标签', type: 'cascaderSelect', childrenVal: 'item', options: this.tagTreeList, multiple: true, filterable: true, checkStrictly: false, collapseTags: true, valueName: 'name' },
        {
          keyword: 'regions', name: '地域', valueName: 'label', labelName: 'label', checkStrictly: true, separator: ',',
          childrenVal: 'children', type: 'cascaderSelect', options: allRegionData, emitPath: true, filterable: true,
          multiple: true, collapseTags: true
        },
        { keyword: 'isSignUp', name: '是否签约', type: 'select', options: this.isSignUpOption },
        {
          keyword: 'operateMode', name: '运营模式', valueName: 'value', labelName: 'label',
          childrenVal: 'children', type: 'cascaderSelect', options: this.operateModeList,
          multiple: true, filterable: true, collapseTags: true, checkStrictly: false
        },
        // 日期
        { keyword: 'createTime', name: '创建时间', labelWidth: '100px', timeType: 'daterange', type: 'rangeDate' },
        { keyword: 'signDate', name: '签约开始时间', labelWidth: '100px', timeType: 'daterange', type: 'rangeDate' },
        // 批量搜索账号
        { keyword: 'orderNum', name: '订单数', labelWidth: '100px', type: 'inputRange', onlyInteger: true, isRequired: true, startPlaceholder: '最低订单数', endPlaceholder: '最高订单数', max: 999999999 },
        { keyword: 'accounts', name: '批量搜索账号', labelWidth: '100px', type: 'input', inputType: 'textarea', lengthLimit: false, placeholder: '可通过粘贴快速填写账号名称+账号ID，每行代表一个账号' }
      ];
      return arr;
    },
    extraPriceFilter() {
      const platform = this.orderPlatformOption.find(i => i.value === this.paramsObj.platformId);
      let item = {};
      if (platform && platform.label === '小红书') {
        item = [
          { keyword: 'monthNotReportPrice', name: '本月非报备价', labelWidth: '130px', type: 'inputRange', isRequired: true, startPlaceholder: '最低价格', endPlaceholder: '最高价格', max: 999999999 },
          { keyword: 'monthReportPrice', name: '本月报备价(即本月平台价格)', labelWidth: '130px', type: 'inputRange', isRequired: true, startPlaceholder: '最低价格', endPlaceholder: '最高价格', max: 999999999 },
          { keyword: 'nextMonthNotReportPrice', name: '次月非报备价', labelWidth: '130px', type: 'inputRange', isRequired: true, startPlaceholder: '最低价格', endPlaceholder: '最高价格', max: 999999999 },
          { keyword: 'nextMonthReportPrice', name: '次月报备价(即次月平台价格)', labelWidth: '130px', type: 'inputRange', isRequired: true, startPlaceholder: '最低价格', endPlaceholder: '最高价格', max: 999999999 }
        ];
        if (this.paramsObj.articlesPrice) {
          delete this.paramsObj.articlesPrice;
        }
      } else {
        item = [
          { keyword: 'articlesPrice', name: '刊例价格', labelWidth: '100px', type: 'inputRange', isRequired: true, startPlaceholder: '最低价格', endPlaceholder: '最高价格', max: 999999999 }
        ];
        if (this.paramsObj.monthReportPrice) {
          delete this.paramsObj.monthReportPrice;
        }
        if (this.paramsObj.nextMonthReportPrice) {
          delete this.paramsObj.nextMonthReportPrice;
        }
        if (this.paramsObj.monthNotReportPrice) {
          delete this.paramsObj.monthNotReportPrice;
        }
        if (this.paramsObj.nextMonthNotReportPrice) {
          delete this.paramsObj.nextMonthNotReportPrice;
        }
      }
      return [
        {
          icon: foldTitle,
          title: '上刊价格',
          filterList: item
        }
      ];
    },
    extraFilterList() {
      const arr = this.isNotice ? [...this.extraPriceFilter, {
        icon: foldTitle,
        title: '根据飞来询单查找账号',
        filterList: [
          { keyword: 'brandName', name: '品牌名称', labelWidth: '100px', type: 'input', doubleClick: true, placeholder: '请输入，双击填充询单品牌', fillValue: this.brandName },
          { keyword: 'productName', name: '产品名称', labelWidth: '100px', type: 'input', doubleClick: true, placeholder: '请输入，双击填充产品名称', fillValue: this.productName },
          { keyword: 'queryPlatformId', name: '下单平台', labelWidth: '100px', type: 'select', options: this.orderPlatformOption, placeholder: '请选择下单平台' },
          { keyword: 'cooperationFormId', name: '合作形式', labelWidth: '100px', type: 'mulSelect', emptyText: this.opEmptyText, options: this.orderFormOption, placeholder: '请选择合作形式' },
          {
            keyword: 'questionId',
            name: '问题',
            type: 'loadMoreSelect',
            valueName: 'id',
            directShow: false,
            multiple: false,
            labelName: 'content',
            labelWidth: '100px',
            placeholder: '请选择问题',
            extendParams: { includeDescription: false },
            searchkeyword: 'content',
            apiUrl: 'admin/question/search'
          },
          this.answerFilterItem,
          { keyword: 'responseStatus', name: '响应状态', labelWidth: '100px', type: 'select', options: this.responsed, placeholder: '请选择响应状态' },
          { keyword: 'queryTagName', name: '询单标签', labelWidth: '100px', valueName: 'id', labelName: 'name',
            childrenVal: 'item', type: 'cascaderSelect', checkStrictly: false, options: this.tagTreeList,
            multiple: true, filterable: true, collapseTags: true, placeholder: '请选择询单标签'
          }
        ]
      }] : this.extraPriceFilter;
      return arr;
    },
    submitDisable() {
      return !this.hasSeleted || this.addLoading;
    },
    layout() {
      return this.showMobilePage ? 'total, prev, next' : 'total, prev, pager, next, sizes, jumper';
    },
    modeList() {
      return [
        { mode: 1, name: '签约', handleClick: this.changeSignUpMode },
        { mode: 0, name: '非签约', handleClick: this.changeSignUpMode }
      ];
    }
  },
  watch: {
    list: {
      handler: function(data) {
        this.$nextTick(() => {
          if (this.setSelectRow && this.curTabName === 'all') {
            this.setSelectRow(data.items);
          }
        });
      },
      deep: true
    },
    'paramsObj.queryPlatformId': {
      handler: function(val) {
        if (!val) {
          this.$set(this.paramsObj, 'cooperationFormId', '');
          this.orderFormOption = [];
        }
        this.getOrderForm({ platformId: val });
      }
    },
    'paramsObj.questionId': {
      handler: function(val) {
        this.answerOption = [];
        this.$set(this.paramsObj, 'answerContent', '');
        if (val) {
          this.getQuestionReply();
        } else {
          this.$set(this.answerFilterItem, 'defaultParams', []);
        }
      }
    }
  },
  created() {
    this.queryDeptTreeList();
    this.platformList();
    this.queryTagTreeList();
    this.getQuestionList();
    this.getOperateData();
  },
  methods: {
    getOperateData() {
      // 获取运营模式
      getOperateoptions().then(res => {
        this.operateModeList = res.data;
      });
    },
    openDrawer(curTabName = 'all') {
      this.curTabName = curTabName;
      // 账号资源快速发起询单/询价跳转后打开账号弹窗默认打开已选择tab
      if (this.$route.query.fromResource && curTabName === 'selected') {
        if (this.setSelectRow) this.setSelectRow(this.selectedTableData);
      }
      this.fetchData(true);
      this.orderVisible = true;
    },
    initData(arr = []) { // 再次发起（复制）回填已选账号
      if (!arr || arr.length === 0) { return; }
      this.selectedData = arr;
      this.multipleSelectionAll = arr;
      if (this.setSelectRow && this.curTabName === 'all') {
        this.setSelectRow(this.list.items);
      }
    },
    changeSignUpMode(val) {
      this.signStatus = val;
      this.fetchData();
    },
    loadMoreFilter({ value, item }) {
      if (value && item.keyword === 'answerContent') {
        const result = this.answerOption.filter(it => it.name.includes(value));
        if (!result.length) this.$set(this.answerFilterItem, 'emptyText', '无数据');
        this.$set(this.answerFilterItem, 'defaultParams', result);
      }
    },
    selectChange(val) {
      if (val.selectedItems && (val.selectedItems.type || val.selectedItems.type === 0)) {
        this.questionType = val.selectedItems.type;
      }
    },
    handleSubmit() {
      if (this.btnText === '确定') {
        this.handleClose();
      } else {
        const data = this.selectedData;
        if (this.showSubmitTip) {
          showModal(this.modalTip, '', {
            iconClass: 'del-icon'
          }).then(() => {
            this.addLoading = true;
            this.$emit('submit', data);
          }).catch(() => {
            return false;
          });
          return;
        }
        this.addLoading = true;
        this.$emit('submit', data);
      }
    },
    clearLoading() {
      this.addLoading = false;
    },
    // 切换列表tab
    onSubActiveOrderChange(data) {
      if (data.paneName === 'all') {
        this.fetchData();
      } else {
        if (this.setSelectRow) this.setSelectRow(this.selectedTableData);
      }
    },
    // 保留数据
    tableSelectionChange(selection) {
      this.selectedData = selection;
      if (this.setSelectRow && this.curTabName === 'selected') this.setSelectRow(this.selectedTableData);
    },
    handleClose() {
      this.$emit('setSelectedData', this.multipleSelectionAll);// 保留已勾选的数据
      this.addLoading = false;
      this.orderVisible = false;
      this.selectedData = [];
      this.clearMixinSelection && this.clearMixinSelection();
    },
    getQuestionList(content) {
      const params = {
        content,
        includeDescription: false
      };
      queryQuestionHistory(params).then(res => {
        if (res.data && res.data.length) {
          res.data.forEach(it => {
            it.value = it.id;
            it.label = it.content;
          });
          this.questionOption = res.data;
        }
      }).catch(err => console.error(err));
    },
    // 获取问题的反馈记录
    getQuestionReply(content) {
      const { questionId } = this.paramsObj;
      if (questionId) {
        const params = {
          questionId
        };
        if (content) params.content = content;
        getQuestionReply(params).then(res => {
          this.answerOption = (res && res.data && res.data.items) || [];
          this.$set(this.answerFilterItem, 'extendParams', { questionId });
          this.$set(this.answerFilterItem, 'defaultParams', this.answerOption);
          this.$nextTick(() => {
            this.$set(this.answerFilterItem, 'multiple', this.questionType === 2);
          });
        }).catch(err => console.error(err));
      }
    },
    // 获取下单平台的列表
    async platformList() {
      try {
        const result = await platformList();
        result.data.forEach((i) => {
          i.label = i.value;
          i.value = i.id;
        });
        this.orderPlatformOption = result.data;
      } catch (error) {
        console.log(error);
      }
    },
    // 获取部门列表
    queryDeptTreeList() {
      getDepartmentAll().then(res => {
        this.deptTreeList = (res && res.data) || [];
      }).catch(e => {
        console.log(e);
      });
    },
    // 获取下单形式
    async getOrderForm() {
      const params = { platformId: this.paramsObj.queryPlatformId };
      paramsAryToStr(['queryPlatformId'], params);
      if (!params.platformId) {
        return;
      }
      try {
        const result = await orderFormList(params.platformId);
        if (result.data && result.data.length) {
          result.data.forEach(i => {
            i.label = i.value;
            i.value = i.id;
          });
        } else {
          this.opEmptyText = '无数据';
        }
        this.orderFormOption = result.data;
        if (this.paramsObj.cooperationFormId) {
          const formId = this.orderFormOption.find(i => i.value === this.paramsObj.cooperationFormId);
          if (!formId) this.$set(this.paramsObj, 'cooperationFormId', '');
        }
      } catch (error) {
        console.log(error);
      }
    },
    selectable(row) {
      // 已关联供应商和有效
      const isValid = row.isValid || row.isValid === false ? row.isValid : true;
      return row.hasRelatedSupplier && isValid;
    },
    // 标签
    queryTagTreeList() {
      const params = { type: this.TAG_MODULES.RESOURCE };
      getTagAll(params).then(res => {
        this.tagTreeList = (res && res.data) || [];
        this.tagTreeList.forEach(item => {
          if (!item.item) item.disabled = true;
        });
      }).catch(e => {
        console.log(e);
      });
    },
    // 排序
    sortMethod(a) {
      if (a.order) {
        this.sortName = a.prop;
        this.sortType = a.order === 'ascending' ? 1 : -1;
      } else {
        this.sortName = '';
        this.sortType = '';
      }
      this.fetchData(true);
    },
    queryClick() {
      this.curTabName = 'all';
      this.fetchData(true);
    },
    queryEmpty() {
      this.paramsObj = {};
      this.sortName = '';
      this.sortType = '';
      this.fetchData(true);
    },
    handleSizeChange(val) {
      if (this.curTabName === 'all') {
        this.perPage = val;
        this.fetchData(true);
      } else {
        this.selectedPerPage = val;
        if (this.setSelectRow) this.setSelectRow(this.selectedTableData);
      }
    },
    handleCurrentChange(toPage) {
      if (this.curTabName === 'all') {
        this.page = toPage;
        this.fetchData();
      } else {
        this.selectedPage = toPage;
        if (this.setSelectRow) this.setSelectRow(this.selectedTableData);
      }
    },
    setRowClass(data) {
      return this.tableRowClassName(data) + (!data.row.isValid ? ' invalid-class' : '');
    },
    fetchData(reset = false) {
      if (this.curTabName === 'all') this.listLoading = true;
      if (reset) this.page = 1;
      const params = this.formatParams();
      validAdviseList(params).then(res => {
        this.listLoading = false;
        if (res.code !== 200) {
          this.$message.error(res.message);
          return;
        }
        this.list = res.data;
      }).catch(err => {
        this.listLoading = false;
        console.log(err);
      });
    },
    formatParams() {
      const params = _.cloneDeep(this.paramsObj);
      params.page = this.page;
      params.perPage = this.perPage;
      params.tabStatus = this.tabStatus;
      paramsRangeFormat(this.rangeKeyArr, params);
      paramsAryToStr(this.arrayKeyArr, params);
      /* if (params.region) {
        params.region = params.region.join('-');
      } */
      if (params.regions) {
        params.regions = params.regions.map(item => {
          return item.join('-');
        }).join(',');
      }
      if (this.queryOrderId && this.queryOrderId !== -1) {
        params.queryOrderId = this.queryOrderId;
      }
      if (this.flyQueryId && this.flyQueryId !== -1) {
        params.flyQueryId = this.flyQueryId;
      }
      if (!params.questionId && params.answerContent) {
        delete params.answerContent;
      }
      if (this.showPriceStatus) {
        params.isInquiry = this.notInquiry ? 0 : null;
      }
      params.isValid = this.isValid ? 1 : 0;
      params.isOnlyNotice = (!this.showNoticeStatus || this.isOnlyNotice) ? 1 : 0;
      params.signStatus = this.signStatus;
      params.sortName = this.sortName;
      params.sortType = this.sortType;
      return params;
    },
    // 跳转销售供应商
    toSupplierDetail(channelId) {
      if (channelId) {
        const url = this.$router.resolve({
          name: 'supplierManageDetail',
          params: { id: channelId }
        });
        window.open(url.href, '_blank');
      }
    },
    toResource(row) {
      const url = this.$router.resolve({
        name: 'detailResource',
        params: { resourceId: row.accountId }
      });
      window.open(url.href, '_blank');
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-drawer__header {
  height: 48px;
  padding: 0 12px 0 24px;
  margin: 0;
  box-shadow: 2px 4px 5px 0 rgba(221,225,234,0.3);
  display: flex;
  align-items: center;
  > span {
    font-size: 14px;
    color: #333;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    height: 0 !important;
  }
}
.select-badge {
  &::v-deep {
    .el-badge__content{
      margin-top: 9px;
      display: flex;
      align-items: center ;
    }
  }
}
.tag-wrap{
  display: flex;
  align-items: center;
}
.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-right: 5px;
}
.tag{
  display: inline-block;
  max-width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color:#406EFF;
  font-size: 12px;
  padding: 0px 8px;
  background: #eff4ff;
  border-radius: 10px;
  margin-right: 4px;
}
::v-deep .el-tabs__header {
  margin: 0;
  border: none;
}
::v-deep .el-drawer__body {
  overflow-y: auto;
  margin-bottom: 56px;
}
::v-deep .el-drawer__header>span{
  font-size: 16px;
}
::v-deep .el-badge__content{
  background: #FB5227;
}
::v-deep .el-badge__content{
  margin-top: 18px;
}
.drawer-content {
  padding: 22px 24px 0;
  overflow-y: auto;
  .table-list {
    border-radius: 10px;
    ::v-deep .invalid-class {
      .cell {
        filter: grayscale(100%);
        // color: #999 !important;
      }
    }
    .el-row {
      padding: 0;
    }
    .delete-button-container {
        flex:1;
        height: 32px;
        display: flex;
        align-items: center;
        .related-btn {
          margin-left: 20px;
          padding-left: 12px;
          padding-right: 12px;
        }
      }
      ::v-deep .pagination-flex {
        position: absolute;
        width: 100% !important;
      }
      }
      .filter {
        display: flex;
        align-items: flex-start;
        position: relative;
        .account-filter {
          width: fit-content !important;
        }
        ::v-deep .mode-switch-container {
          box-shadow: none;
          margin-left: 32px;
          position: absolute;
          left: 430px;
          &.is-mobile {
            top: 40px;
            left: 50px;
          }
        }
        .filter-checkbox-container {
          margin-left: 16px;
          position: absolute;
          top: 4px;
          left: 560px;
        }
      }
    }
    ::v-deep .el-tabs__nav-wrap::after {
      z-index: -1;
    }
    ::v-deep .el-tabs__active-bar {
      bottom: 1px;
    }
    ::v-deep .is-active {
      font-weight: bold;
    }
    .info-icon-img {
      width: 16px;
      height: 16px;
      margin-right: 4px;
    }
</style>
